<template>
<div >
 <el-container>
   <el-header >
     <Header/>
   </el-header>
   <el-container>
<!--     侧边导航-->
     <el-aside  class="app" ><Sidebar/></el-aside>
<!--     身体部分-->
     <el-main  class="app" >
       <div style="margin-left: 0px" align="center">
       <el-card class="card" style="float: left;width: 800px">
         <div class="main_menu">
            <el-menu :default-active="activeIndex"
                     router
                     class="el-menu-demo" mode="horizontal">
              <el-menu-item index="/">推荐</el-menu-item>
              <el-menu-item index="/new">最新</el-menu-item>
              <el-menu-item index="/qas">问答</el-menu-item>
            </el-menu>
         </div>
         <div>
           <router-view/>
         </div>
       </el-card>
<!--         中间右侧部分导航-->
    <el-card class="card" style="background-color:white;float: left;position: absolute;right: 20px;width: 300px">
<!--        <el-button class="tagButton" style="margin: 5px" v-for="(tag,index) in tagArr" :type="tag.type" @click="getTag(tag.name,index)">{{tag.name}}</el-button>-->
      <el-checkbox-group v-model="searchParam" @change="search" max="3">
        <el-checkbox-button style="margin: 5px" v-for="(tag,index) in tagArr" :label="tag" :key="index">{{tag}}</el-checkbox-button>
      </el-checkbox-group>
    </el-card>
       </div>

     </el-main>

   </el-container>
 </el-container>
<!--  <div class="footer" style="position: relative;margin-top: 750px">-->
<!--    <Footer/>-->
<!--  </div>-->
</div>
</template>

<script>
// @ is an alias to /src
import Footer from '@/components/IndexFooter.vue';
import Header from '@/components/Header.vue';
import Sidebar from "@/components/Sidebar.vue";
export default {
  name: 'HomeView',
  data() {
    return{
      searchParam:[],
      tagArr:["java","c++",
        "python","php",
        "c",".net"],
      activeIndex: '/',
      showRecommend:true,
    }
  },
  components: {
    Header,
    Sidebar,
    Footer,
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    search(data){
      console.log(data);
      // this.axios.get(url,this.searchParam).then((response)=>{
      //   if(response.data.code==1){
      //
      //   }
      // })
    }
  },
}
</script>
<style scoped>
.el-checkbox-button, .el-checkbox-button__inner{
  border-left: 1px solid #C0C0C0 !important;
}
.el-checkbox-button__inner{
  border-left: 0px solid #C0C0C0 !important;
}
#card{
  position: absolute;top: 60px;bottom:260px;
}
.app{
  background-color: #f7f8fa;position: absolute;
}
.el-header{
  position: absolute;top: 0;left: 0;right: 0;
}
.el-aside{
  position: absolute;top: 60px;left: 0px;bottom:0px;
}
.el-main{
  position: absolute;top: 60px;left: 300px;right: 0;bottom: 0px;
}
.el-footer{
  position: absolute;left: 0;right: 0;bottom:0;
}
</style>

